<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card">
          <el-row :gutter="10">
            <el-col :span="12">
              <parent-index ref="parent" @fetch-data="parentCallBack" />
            </el-col>
            <el-col :span="12">
              <child-index ref="child" @fetch-data="childCallBack" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template-index ref="template" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ParentIndex from './parent'
import ChildIndex from './child'
import TemplateIndex from './mb'
export default {
  name: 'PortalNewTempIndex',
  components: {
    ParentIndex, ChildIndex, TemplateIndex
  },
  created() {
    this.$nextTick(() => {
      this.$refs.parent.init()
    })
  },
  methods: {
    parentCallBack(data) {
      if (undefined !== data && data !== null) {
        this.$nextTick(() => {
          this.$refs.child.init(data)
        })
      }
    },
    childCallBack(data) {
      if (undefined !== data && data !== null) {
        this.$nextTick(() => {
          this.$refs.template.init(data)
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
